<template>
    <div id="app" class="harness">
        <div class="harnessNav">
            <div>
                <div><span class="glyphicon glyphicon-usd"></span></div>
                <div>提现管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-usd"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    提现管理
                </div>
            </div>
        </div>
        <div class="harnDeta">
            <div class="harnNav">
            </div>
            <div class="detail" v-loading.body="loading" element-loading-text="loadStr">
                <ul>
                    <li class="firstLi">
                        <div>商户名称</div>
                        <div>提现金额</div>
                        <div>状态</div>
                        <div>备注信息</div>
                        <div class="delHarn">操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div>{{item.storeName}}</div>
                        <div>{{item.applyAmount}}</div>
                        <div>{{item.applyStatus | stateFun}}</div>
                        <div>{{item.applyLogs | strFun}}</div>
                        <div class="delHarn">
                            <small @click="acceClick(index)"><span class="glyphicon glyphicon-ok"></span>处理完成</small>
                            <small @click="refClick(index)"><span class="glyphicon glyphicon-remove"></span>拒绝受理</small>

                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSizeNum" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加通知弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMain" v-loading="adding" v-show="isAddShow">
                    <div>
                        <h2>上传处理图片</h2>
                        <div @click="calladd" class="calladd">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>图片：</div>
                        <div id="upDateImg">
                            <div v-show="showUpImage"><img class="showUpImage" :src="ipImage" alt=""></div>
                            <div v-if="!showUpImage">
                                <label for="filea">点击添加图片</label>
                                <input type="file" @change="headImageChange" name="file" id="filea" multiple>
                            </div>
                            <div v-else>
                                <div @click="removeUpImage" class="removeImage">点击删除图片</div>
                            </div>
                        </div>
                    </div>
                    <div v-show='true' class="promptC">
                        {{promptStr}}
                    </div>
                    <div class="operate">
                        <button @click="addClick" class="addClick">确认</button>
                        <button @click="calladd" class="calladd">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'harness',
        data() {
            return {
                items: [
                ],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                loading: false,
                nullShow: true,
                isAddPopup: true,
                isShowAdd: true,
                isAddShow: false,
                adding: false,
                promptStr: '',
                ipImage: '',
                showUpImage: '',
                dataFile: {},
                aceeIndex: '',
                loadStr: '加载中...'
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')

        },
        filters: {
            ctimeFun: function (val) {
                if (val) {
                    var now = new Date(val)
                    var year = now.getYear() - 100;
                    var month = now.getMonth() + 1;
                    month = month > 9 ? month : "0" + month
                    var date = now.getDate();
                    date = date > 9 ? date : "0" + date
                    var hour = now.getHours();
                    hour = hour > 9 ? hour : "0" + hour
                    var minute = now.getMinutes();
                    minute = minute > 9 ? minute : "0" + minute
                    return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
                } else {
                    return 'wu '
                }
            },
            stateFun: function (val) {
                if (val != null) {
                    if (val == 0) {
                        return '等待处理'
                    } else if (val == 1) {
                        return '已处理'
                    } else if (val == 2) {
                        return '拒绝'
                    }
                } else {
                    return '无'
                }
            },
            strFun: function (val) {
                if (val) {
                    return val
                } else {
                    return '无'
                }
            }
        },
        methods: {
            // 图片选中时触发
            headImageChange(e) {
                let self = this;
                var file = e.target.files[0]
                self.dataFile = e.target.files[0]
                console.log(e.target.files[0])
                // 看支持不支持FileReader
                if (!file || !window.FileReader) return;
                if (/^image/.test(file.type)) {
                    self.promptStr = '带 * 号为必填项'
                    // 创建一个reader
                    var image = new Image();
                    var reader = new FileReader();
                    // 将图片将转成 base64 格式
                    reader.readAsDataURL(file);
                    reader.onload = (e) => {
                        self.showUpImage = true;
                        self.ipImage = e.target.result;
                    };
                    self.imgUrl = window.URL.createObjectURL(file)
                } else {
                    self.promptStr = '图片格式只能为png或者jpg'
                }
            },
            // 删除选中图片
            removeUpImage() {
                this.showUpImage = false;
                this.imgUrl = ''
            },
            // 设置每页个数
            handleSizeChange(val) {
                var self = this;
                self.loading = true
                self.pageSizeNum = val;
                self.loading = true
                self.getCashList({
                    page_size: val,
                    number: 1
                }).then((data) => {
                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            // 初始化分页
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this;
                self.loading = true
                self.getCashList({
                    page_size: self.pageSizeNum,
                    number: val
                }).then((data) => {
                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            // 初始化分页
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            calladd() {
                this.isShowAdd = true
                this.isAddShow = false
            },
            // 同意提现
            acceClick(index) {
                this.isShowAdd = false
                this.isAddShow = true
                this.aceeIndex = index
            },
            addClick() {
                var self = this;
                var imgTure = self.imgUrl
                if (imgTure.length > 0) {
                    self.promptStr = '带 * 号为必填项'
                    // 添加通知
                    self.adding = true
                    const formData = new FormData()
                    formData.append("file", self.dataFile)
                    self.getNoticeFileAdd(formData).then((data) => {
                        if (data.data.code == "200") {
                            self.loadStr = '处理中，请稍后....'
                            self.adding = false
                            self.isShowAdd = true
                            self.isAddShow = false
                            var userId = sessionStorage.getItem('userId')
                            self.loading = true
                            self.getCashAccept({
                                opid: userId,
                                applyId: self.items[self.aceeIndex].id,
                                url: data.data.data[0]
                            }).then((data) => {
                                if (data.data.code == "200") {
                                    self.$message({
                                        type: 'success',
                                        message: '操作成功'
                                    });
                                    self.getCashList({
                                        page_size: self.pageSizeNum,
                                        number: self.currentPage
                                    }).then((data) => {
                                        self.loading = false
                                        if (data.data.code == "200") {
                                            if (data.data.data.content.length > 0) {
                                                self.nullShow = false
                                                self.items = data.data.data.content
                                                self.totalNum = data.data.data.totalElements
                                                self.loadStr = '加载中...'
                                            } else {
                                                self.nullShow = true
                                            }
                                        }
                                    }).catch(msg => console.log(msg))
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (imgTure.length == 0) {
                        this.promptStr = '图片为必填项'
                    }
                }
            },
            // 拒绝提现
            refClick(index) {
                var userId = sessionStorage.getItem('userId')
                var self = this
                this.$prompt('请输入拒绝理由', '拒绝', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    self.loading = true
                    self.getCashRefused({
                        opid: userId,
                        applyId: self.items[index].id,
                        log: value
                    }).then((data) => {
                        self.loading = false
                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '操作成功'
                            });
                            self.getCashList({
                                page_size: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {
                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        // 初始化分页
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.totalElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '取消拒绝'
                    });
                });
            },
         ...mapActions(['getCashList','getCashAccept','getCashRefused','getNoticeFileAdd'])
        }
    }

</script>

<style scoped src="../../assets/css/deposit.css">

</style>